<template>
  <section class="content-view" style="font-size: 0">
    <h2 class="item-title">按钮类型</h2>
    <h-button class="button-class" type="rimless">rimless 按钮</h-button>
    <h-button class="button-class" type="default">default 按钮</h-button>
    <h-button class="button-class" type="primary">primary 按钮</h-button>
    <h-button class="button-class" type="safety">safety 按钮</h-button>
    <h-button class="button-class" type="warning">warning 按钮</h-button>
    <h-button class="button-class" type="danger">danger 按钮</h-button>

    <h2 class="item-title">按钮尺寸</h2>
    <h-button class="button-class" size="mini">mini 按钮</h-button>
    <h-button class="button-class" size="small">small 按钮</h-button>
    <h-button class="button-class" size="normal">normal 按钮</h-button>
    <h-button class="button-class" size="large">large 按钮</h-button>
    <h-button class="button-class" size="huge">huge 按钮</h-button>

    <h2 class="item-title">自定义圆角 (直接通过class设置)</h2>
    <h-button class="button-class radius-small">rimless 按钮</h-button>
    <h-button class="button-class radius-normal">default 按钮</h-button>
    <h-button class="button-class radius-large">primary 按钮</h-button>

    <h2 class="item-title">默认点击效果</h2>
    <h-button class="button-class radius-small" type="rimless">基础按钮(无边框)</h-button>
    <h-button class="button-class radius-small" type="rimless" shadow>基础按钮(无边框、有阴影效果)</h-button>
    <h-button class="button-class radius-small purple">基础按钮(有背景色)</h-button>

    <h2 class="item-title">波纹点击效果</h2>
    <h-button class="button-class radius-small" type="rimless" ripple>基础按钮(无边框)</h-button>
    <h-button class="button-class radius-small" type="rimless" ripple shadow>基础按钮(无边框、有阴影效果)</h-button>
    <h-button class="button-class radius-small purple" ripple ripple-opacity="0.3">基础按钮(有背景色)</h-button>

    <h2 class="item-title">禁用效果</h2>
    <h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>

    <h2 class="item-title">图标按钮 (尺寸通过设置内部图标的大小实现)</h2>
    <h-button class="button-class radius-small image" type="rimless" ripple ripple-color="#3d8ce4">
      <img src="@/assets/images/logo.png" alt="logo" style="width: 50px">
    </h-button>
    <h-button class="button-class radius-small image" type="rimless" ripple ripple-color="#3d8ce4">
      <img src="@/assets/images/logo.png" alt="logo" style="width: 40px">
    </h-button>
    <h-button class="button-class radius-small image" type="rimless" ripple ripple-color="#3d8ce4">
      <img src="@/assets/images/logo.png" alt="logo" style="width: 30px">
    </h-button>
    <h-button class="button-class radius-small image" type="rimless" ripple ripple-color="#3d8ce4">
      <img src="@/assets/images/logo.png" alt="logo" style="width: 20px">
    </h-button>

    <h2 class="item-title">包含加载状态的按钮</h2>
    <h-button class="button-class radius-small" ripple>
      <div style="font-size: 0">
        <spin class="spin" size="20px"/>
        <span class="text">提交中...</span>
      </div>
    </h-button>
  </section>
</template>

<script>
import { HButton, Spin } from 'hippius'

export default {
  components: {
    HButton,
    Spin,
  },
}
</script>

<style lang="stylus" scoped>
.button-class {
  width: 90%;
  margin: 10px 5%;
  display: block;

  &.image {
    width: auto;
    margin-right: 0;
    display: inline-block;
  }

  &.radius-small {
    border-radius: 3px;
  }

  &.radius-normal {
    border-radius: 8px;
  }

  &.radius-large {
    border-radius: 20px;
  }

  .spin {
    vertical-align: middle;
  }

  .text {
    font-size: 14px;
    margin-left: 8px;
    vertical-align: middle;
  }
}

.purple {
  color: #fff;
  background-color: #7e57c2;
  border: 1px solid #7e57c2;
}
</style>
